{% extends "_layout/default.html" %}

{% block stylesheet %}
	{{ super() }}
	<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-daterangepicker/daterangepicker.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='timepicker/bootstrap-timepicker.min.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-star-rating/css/star-rating.min.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css') }}">
{% endblock %}

{% block body_content %}
<div class="content-wrapper">
	<section class="content">
		<div class="row">
			<div class="col-md-12">
				<form role="form">
					<input type="hidden" name="_id" value="{{ user_log_item._id|string }}" />	
					<div class="box box-info">
	            		<div class="box-header with-border"><h3 class="box-title">我的日志事件</h3></div>
	            		<div class="box-body">
	              			<div class="form-group">
	                			<label>事件标签<a class="btn btn-link btn-sm" onclick="doOpenTagModal()">选择标签</a></label>
	                			<div id="user-log-item-tag">
	                				{% if user_log_item.tag_id %} 
			                			<div class="form-control external-event" style="background-color: {{ user_log_item.tag_color }}">
			                				{{ user_log_item.tag_name }}
			                				<input type="hidden" name="tag_id" value="{{ user_log_item.tag_id }}" />
			                				<input type="hidden" name="tag_name" value="{{ user_log_item.tag_name }}" />
			                				<input type="hidden" name="tag_color" value="{{ user_log_item.tag_color }}" />
			                			</div>
			                		{% else %}
			                			<div class="form-control" onclick="doOpenTagModal()">
			                				{{ user_log_item.tag_name }}
			                				<input type="hidden" name="tag_id" value="" />
			                				<input type="hidden" name="tag_name" value="" />
			                				<input type="hidden" name="tag_color" value="" />
			                			</div>
		                			{% endif %}
	                			</div> 
	              			</div>
	              			<div class="form-group">
	                			<label>开始时间</label>
	                			<div class="row">
	                				<div class="col-md-12">
		               					<input type="text" name="user_log_start_ymd" class="form-control pull-left" value="{{ user_log_item.start_time|date('%Y-%m-%d') }}" style="width:120px;" />
		               					<div class="bootstrap-timepicker pull-left" style="width:100px;">
		               						<input type="text" name="user_log_start_his" class="form-control timepicker" value="{{ user_log_item.start_time|date('%H:%M:%S') }}" />
		               					</div>
	               					</div>
               					</div>
							</div>
	              			<div class="form-group">
	                			<label>结束时间</label>
	                			<div class="row">
	                				<div class="col-md-12">
			               				<input type="text" name="user_log_end_ymd" class="form-control pull-left" value="{{ user_log_item.end_time|date('%Y-%m-%d') }}" style="width:120px;" />
		               					<div class="bootstrap-timepicker pull-left" style="width:100px;">
				               				<input type="text" name="user_log_end_his" class="form-control timepicker" value="{{ user_log_item.end_time|date('%H:%M:%S') }}"/>
		               					</div>
	               					</div>
               					</div>
							</div>
							<div class="form-group">
								<label>事件内容</label>
	                			<textarea name="content" class="form-control">{{ user_log_item.content}}</textarea>
	              			</div>
							<div class="form-group">
								<label>满意度</label>
	                			<input type="text" name="satisfy" id="user-log-satisfy" value="{{ user_log_item.satisfy / 2 }}" />
	              			</div>
	            		</div>
	            		<div class="box-footer">
	              			<input type="button" class="btn btn-default" onclick="doRemove(this)" value="删除" />
	              			<input type="button" class="btn btn-primary pull-right" onclick="doSave(this)" value="保存" />
	            		</div>
	          		</div>
				</form>
			</div>
		</div>
	</section>
</div>
{% endblock %}

{% block bodyscript %}
{{ super() }}
<script src="{{ url_for('static', filename='moment/moment.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js') }}"></script>
<script src="{{ url_for('static', filename='timepicker/bootstrap-timepicker.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-star-rating/js/star-rating.min.js') }}"></script>
<script>
//删除 标签
var doDeleteTag	= function(ev){
	// 事件被使用jQuery绑定了。目的时不要触发外面div的click事件
}

//删除
var doRemove	= function(ev){
	if(jQuery(ev).closest('form').find('[name="_id"]').val() == ''){
		return;
	}
	jQuery(ev).prop('disabled', true);
	jQuery.post("{{ url_for('logger_remove') }}", jQuery(ev).closest('form').serialize(), function(json){
		jQuery(ev).prop('disabled', false);
		if(checkAjaxResponse(json)){
			alert('删除成功')
			location.href	= "{{ url_for('logger_form') }}";
		}
	}, 'json');
}

//保存
var doSave	= function(ev){
	jQuery(ev).prop('disabled', true);
	jQuery.post("{{ url_for('logger_save') }}", jQuery(ev).closest('form').serialize(), function(json){
		jQuery(ev).prop('disabled', false);
		if(checkAjaxResponse(json)){
			alert('操作成功');
			jQuery(ev).closest('form').find('[name="_id"]').val(json._id);
		}
	}, 'json');
}

// 打开标签选择窗口
var doOpenTagModal	= function(){
	if(jQuery('#tag-modal').length > 0){
		jQuery('#tag-modal').modal();
		return;
	}

	jQuery('body').append(
		'<div id="tag-modal" class="modal">'
			+ '<div class="modal-dialog">'
				+ '<div class="modal-content">'
					+ '<div class="modal-body"></div>'
					+ '<div class="modal-footer">'
						+ '<input type="button" class="btn btn-primary" data-dismiss="modal" value="关闭" />'
					+ '</div>'
				+ '</div>'
			+ '</div>'
		+ '</div>'
	);
	jQuery('#tag-modal').modal();
	
	loadTag();
}
var loadTag = function (){
	jQuery('#tag-modal').find('.modal-body').load("{{ url_for('calendar_tag') }}", function(){
		//Color chooser button
		jQuery('#color-chooser > li > a').click(function(e){
	        e.preventDefault()
	        var currColor = jQuery(this).data('color')
	        jQuery('#add-new-event').css('background-color', currColor);
	        jQuery('#add-new-event').data('color', currColor);
	    })
	    jQuery('#external-events').find('.external-event').click(function(){
		    var color	= jQuery(this).data('color');
		    var name	= jQuery(this).data('name');
		    var tag_id	= jQuery(this).data('id');
		    jQuery('#user-log-item-tag').empty().append(
				'<div class="form-control external-event" style="background-color: ' + color + '">'
					+ name +
					'<input type="hidden" name="tag_id" value="' + tag_id + '" />' +
					'<input type="hidden" name="tag_name" value="' + name + '" />' +
					'<input type="hidden" name="tag_color" value="' + color + '" />' +
				'</div>'
			);
		    jQuery('#tag-modal').modal('hide');
		});

		//Colorpicker
	    jQuery('.colorpicker-element').colorpicker();
	    jQuery('.colorpicker-element').find(':text').change(function(){
	        var currColor = jQuery(this).val()
	        jQuery('#add-new-event').css('background-color', currColor);
	        jQuery('#add-new-event').data('color', currColor);
		});
		
		jQuery('#external-events').find('.external-event').find('.fa-times').click(function(e){
			e.stopPropagation();
			if(confirm('你确定要删除标签吗?')){
				var tag_id	= jQuery(this).closest('.external-event').data('id')
				jQuery.post("{{ url_for('calendar_tag_remove', user_tag_id='') }}" + tag_id, function(json){
					if(checkAjaxResponse(json)){
						loadTag();
					}
				}, 'json');
			}
		});
		
		jQuery('#add-new-event').click(function(){
	    	var post_data = {
	        	tag_name    : jQuery('#new-event').val(),
	        	tag_color   : jQuery(this).data('color')
	        };
	    	var ev	= this;
	    	jQuery(ev).prop('disabled', true);
	        jQuery.post("{{ url_for('calendar_tag_add') }}", post_data, function(json){
		    	jQuery(ev).prop('disabled', false);
	        	if(checkAjaxResponse(json)){
	        		loadTag();
	        	}
	        }, 'json');
		});
	});
}

jQuery(function(){
	// star
	jQuery('#user-log-satisfy').rating({
		showClear: false,
        step: 1,
        starCaptions: {1: '非常不满意', 2: '不满意', 3: '一般', 4: '满意', 5: '非常满意'},
        starCaptionClasses: {1: 'text-danger', 2: 'text-warning', 3: 'text-info', 4: 'text-primary', 5: 'text-success'}
    });
	
	// timepicker init
	jQuery('[name="user_log_start_ymd"],[name="user_log_end_ymd"]').datepicker({
		format: 'yyyy-mm-dd',
		language: 'zh-CN'
	});
	$('.timepicker').timepicker({
		maxHours: 24,
		showMeridian: false,
		showSeconds: true,
		showInputs: false
	})
});
</script>
{% endblock %}